<template>
  <div class="login-box">
    <!-- 导航栏 -->
    <van-nav-bar
      title="登录"
      class="page-nav-bar"
    >
      <template #left>
        <van-icon @click="$router.go(-1)" name="cross" color="#fff" size="18"/>
      </template>
    </van-nav-bar>
    <!-- 导航栏 -->
    <!-- 登陆表单 -->
    <van-form @submit="onSubmit" ref="loginFormRef">
      <van-field
        v-model="user.mobile"
        required
        clearable
        name="mobile"
        placeholder="请输入用户名"
        :rules="userFormRules.mobile"
        type="number"
        maxlength="11"
      >
      <i slot="left-icon" class="heima hm-shouji"></i>
      </van-field>
      <van-field
        v-model="user.code"
        name="code"
        placeholder="请输入验证码"
        :rules="userFormRules.code"
        type="number"
        maxlength="6"
      >
      <i slot="left-icon" class="heima hm-yanzhengma"></i>
      <template #button>
        <van-count-down v-if="isCountDownShow" :time="1000 * 60" format="ss 秒" @finish="isCountDownShow = false"/>
        <van-button v-else class="send-code" round size="small"
        type="default" native-type="button" @click="onSendCode">发送验证码</van-button>
      </template>
      </van-field>
      <div>
        <van-button block type="info" native-type="submit" class="login-btn">
          登录
        </van-button>
      </div>
    </van-form>
    <!-- 登录表单 -->
  </div>
</template>
<script>
import { login, sendCode } from '@/api/user.js'
export default {
  name: 'login',
  data () {
    return {
      // 定义所有表单数据对象
      user: {
        mobile: '18811179159',
        code: '246810'
      },
      isCountDownShow: false,
      userFormRules: {
        mobile: [
          { required: true, message: '手机号不能为空' },
          { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[035678]|18[0-9]|14[57])[0-9]{8}$/, message: '手机号格式不正确' }
        ],
        code: [
          { required: true, message: '验证码不能为空' },
          { pattern: /^\d{6}$/, message: '验证码格式不正确' }
        ]
      }
    }
  },

  created () {
  },
  methods: {
    async onSubmit () {
      // 点击登录触发事件
      // 1获取到输入框的值
      // 2校验form表单
      // 3发送请求 await 修饰promise
      this.$toast.loading({
        duration: 0, // 持续展示
        message: '登录中...', // 提示文字
        forbidClick: true // 透明的遮罩
      })
      try {
        const { data: res } = await login(this.user)
        this.$store.commit('changeUser', res.data)
        this.$toast.success('登录成功')
        this.$router.go(-1)
      } catch (err) {
        // 如果err错误信息里响应状态码为400手机验证码错误
        if (err.response.status === 400) return this.$toast.fail('手机或验证码错误')
        this.$toast.fail('网络错误，请稍后重试')
      }
    },
    // 点击发送验证码
    async onSendCode () {
      // 1校验手机号
      try {
        await this.$refs.loginFormRef.validate('mobile')
      } catch (err) {
        return console.log('手机号验证不通过')
      }
      this.isCountDownShow = true
      // 2验证通过显示倒计时
      try {
        await sendCode(this.user.mobile)
        this.$toast.success('发送成功')
      } catch (err) {
        this.isCountDownShow = false
        if (err.response.status === 429) {
          return this.$toast.fail('发送频繁')
        }
        this.$toast.fail('亲，发送失败')
      }
      // 3请求发送验证码
    }
  }
}
</script>

<style scoped lang='less'>
  .login-box {
    .heima {
      font-size: 37px;
    }
    // 发送验证码
     .send-code {
      width: 162px;
      height: 46px;
      background: #EDEDED;
      color: none;
    }
    .login-btn {
      margin: 53px 0;
      background: #6db4fb;
      border: none;
    }
  }
</style>
